<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 8 Dragging</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #FFFFFF;

		}
	</style>
	<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
	<script>
	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0x97C56E, true);

	// create a renderer instance
	var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);

	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);
	renderer.view.style.position = "absolute";
	renderer.view.style.top = "0px";
	renderer.view.style.left = "0px";
	requestAnimFrame( animate );

	// create a texture from an image path
	var texture = PIXI.Texture.fromImage("bunny.png");

	for (var i = 0; i < 10; i++)
	{
		createBunny(Math.random() * window.innerWidth, Math.random() * window.innerHeight)
	};


	function createBunny(x, y)
	{
		// create our little bunny friend..
		var bunny = new PIXI.Sprite(texture);

		// enable the bunny to be interactive.. this will allow it to respond to mouse and touch events
		bunny.interactive = true;
		// this button mode will mean the hand cursor appears when you rollover the bunny with your mouse
		bunny.buttonMode = true;

		// center the bunnys anchor point
		bunny.anchor.x = 0.5;
		bunny.anchor.y = 0.5;
		// make it a bit bigger, so its easier to touch
		bunny.scale.x = bunny.scale.y = 3;


		// use the mousedown and touchstart
		bunny.mousedown = bunny.touchstart = function(data)
		{
			// stop the default event...
			data.originalEvent.preventDefault();

			// store a reference to the data
			// The reason for this is because of multitouch
			// we want to track the movement of this particular touch
			this.data = data;
			this.alpha = 0.9;
			this.dragging = true;
		};

		// set the events for when the mouse is released or a touch is released
		bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
		{
			this.alpha = 1
			this.dragging = false;
			// set the interaction data to null
			this.data = null;
		};

		// set the callbacks for when the mouse or a touch moves
		bunny.mousemove = bunny.touchmove = function(data)
		{
			if(this.dragging)
			{
				var newPosition = this.data.getLocalPosition(this.parent);
				this.position.x = newPosition.x;
				this.position.y = newPosition.y;
			}
		}

		// move the sprite to its designated position
		bunny.position.x = x;
		bunny.position.y = y;

		// add it to the stage
		stage.addChild(bunny);
	}

	function animate() {

	    requestAnimFrame(animate);

	    // render the stage
	    renderer.render(stage);
	}

	</script>

	</body>
</html>
